<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>用户信息管理</title>
  <!-- Google Font: Source Sans Pro -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="{% static 'plugins/google-fonts/google.fonts.css' %}">
  <link rel="stylesheet" href="{% static 'plugins/fontawesome-free/css/all.min.css' %}">
  <!-- DataTables -->
  <link rel="stylesheet" href="{% static 'plugins/datatables-bs4/css/dataTables.bootstrap4.min.css' %}">
  <link rel="stylesheet" href="{% static 'plugins/datatables-responsive/css/responsive.bootstrap4.min.css' %}">
  <link rel="stylesheet" href="{% static 'plugins/datatables-buttons/css/buttons.bootstrap4.min.css' %}">
  <!-- Theme style -->
  <link rel="stylesheet" href="{% static 'dist/css/adminlte.min.css' %}">
  <link rel="stylesheet" href="{% static 'plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css' %}">
  <link rel="stylesheet" href="{% static 'plugins/icheck-bootstrap/icheck-bootstrap.min.css' %}">
  <link rel="stylesheet" href="{% static 'plugins/jqvmap/jqvmap.min.css' %}">
  <link rel="stylesheet" href="{% static 'dist/css/common.css'%}">
  <link rel="stylesheet" href="{% static 'plugins/overlayScrollbars/css/OverlayScrollbars.min.css' %}">
  <link rel="stylesheet" href="{% static 'plugins/daterangepicker/daterangepicker.css' %}">
  <link rel="stylesheet" href="{% static 'plugins/summernote/summernote-bs4.min.css' %}">
</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper">

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- 换行占位 -->
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <p> </p>
            </div>
        </div>
    </section>
    <!-- 搜索栏 -->
    <section class="content">
        <div class="container-fluid">
            <form action="">
                <div class="row">
                    <div class="col-4">
                        <div class="form-group">
                            <select class="form-control" id="status_select_id" style="width: 100%;">
                                <option selected>请选择</option>
                                <option value="1">正常</option>
                                <option value="0">未启用</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-6">
                      <div class="input-group">
                          <input type="search" id="name_input_id" class="form-control" placeholder="请输入用户名称">
                      </div>
                    </div>
                    <div class="col-2">
                      <div class="input-group">
                         <button type="button" class="btn btn-block btn-primary" onclick="searchButton()">搜索</button>
                      </div>
                    </div>
                </div>
            </form>
        </div>
    </section>
    <!-- Main content -->
    <section class="content">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12">
            <div class="card">
              <div class="card-body">
                <table id="table-template" class="table table-bordered table-hover">
                  <thead>
                      <tr>
                        <th>用户名</th>
                        <th>真实姓名</th>
                        <th>性别</th>
                        <th>电话</th>
                        <th>邮箱</th>
                        <th>注册时间</th>
                        <th>头像</th>
                        <th>状态</th>
                      </tr>
                  </thead>
                  <tbody>
                    {% for per in users %}
                    <tr>
                        <td>{{ per.username }}</td>
                        <td>{{ per.true_name }}</td>
                        {% if per.sex == 0 %}
                            <td>男</td>
                        {% else %}
                            <td>女</td>
                        {% endif %}
                        <td>{{ per.mobile }}</td>
                        <td>{{ per.email }}</td>
                        <td>{{ per.create_time}}</td>
                        {% if per.user_img != "" %}
                            <td><img src="/media/{{ per.user_img }}" width="30px" height="30px"/></td>
                        {% else %}
                            <td><img src="/media/default_user_img.png" width="30px" height="30px"/></td>
                        {% endif %}
                        <td>
                            <div class="col-12">
                                {% if per.is_active == 0 %}
                                    <a class="btn btn-primary btn-block" href="javascript:void(0)" onclick="userApproval(this)">启用</a>
                                {% else %}
                                    <a class="btn btn-danger btn-block" href="javascript:void(0)" onclick="userApproval(this)">禁用</a>
                                {% endif %}
                                <!--页面隐藏存储每一条数据中对应的用户ID，后期会使用该ID操作用户数据的状态-->
                                <input type="hidden" id="id_hidden" value={{ per.id }}>
                            </div>
                        </td>
                    </tr>
                   {% endfor %}
                  </tbody>
                </table>
              <!-- /.card-body -->
              </div>
            </div>
            <!-- /.card -->
          </div>
          <!-- /.col -->
        </div>
        <!-- /.row -->
      </div>
      <!-- /.container-fluid -->
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
</div>
<!-- ./wrapper -->
<!--模态窗口，确认是否审批通过用户-->
<div class="modal fade" id="userApprovalModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form action="" method="post">
                {% csrf_token  %}
                <div class="modal-header">
                    <h4 class="modal-title" style="float:left">提示信息</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p id="info">您确认要启用或禁用该用户吗？</p>
                    <input type="hidden" id="user_approval_id">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <a id="approvalButton" class="btn btn-success" data-dismiss="modal">确定</a>
                </div>
            </form>>
        </div>
    </div>
</div>
<!-- jQuery -->
<script src="{% static 'plugins/jquery/jquery.min.js' %}"></script>
<!-- Bootstrap 4 -->
<script src="{% static 'plugins/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
<!-- DataTables  & Plugins -->
<script src="{% static 'plugins/datatables/jquery.dataTables.min.js' %}"></script>
<script src="{% static 'plugins/datatables-bs4/js/dataTables.bootstrap4.min.js' %}"></script>
<script src="{% static 'plugins/datatables-responsive/js/dataTables.responsive.min.js' %}"></script>
<script src="{% static 'plugins/datatables-responsive/js/responsive.bootstrap4.min.js' %}"></script>
<script src="{% static 'plugins/datatables-buttons/js/dataTables.buttons.min.js' %}"></script>
<script src="{% static 'plugins/datatables-buttons/js/buttons.bootstrap4.min.js' %}"></script>
<script src="{% static 'plugins/jszip/jszip.min.js' %}"></script>
<script src="{% static 'plugins/pdfmake/pdfmake.min.js' %}"></script>
<script src="{% static 'plugins/pdfmake/vfs_fonts.js' %}"></script>
<script src="{% static 'plugins/datatables-buttons/js/buttons.html5.min.js' %}"></script>
<script src="{% static 'plugins/datatables-buttons/js/buttons.print.min.js' %}"></script>
<script src="{% static 'plugins/datatables-buttons/js/buttons.colVis.min.js' %}"></script>
<!-- AdminLTE App -->
<script src="{% static 'dist/js/adminlte.min.js' %}"></script>
<script src="{% static 'plugins/jquery-ui/jquery-ui.min.js' %}"></script>
<!-- Page specific script -->
<script>
  $(function () {
    $('#table-template').DataTable({
      "paging": true,         <!-- 开启表格分页 -->
      "lengthChange": false,
      "searching": false,
      "ordering": true,
      "info": true,
      "autoWidth": false,
      "responsive": true,
    });
  });
</script>
<!--改变用户状态-->
<script>
    // 打开模态框并设置需要删除的ID
    function userApproval(obj) {
        var $tds = $(obj).parent().children();     // 获取到父控件div下面的所有子项，这里只有2个项，
        var user_id = $($tds[1]).val();            // 获取隐藏的ID，获取第2项目就是隐藏的ID
        console.log(user_id)
        $("#user_approval_id").val(user_id);       // 给模态框中需要审批用户ID赋值
        $("#userApprovalModal").modal({
            backdrop: 'static',
            keyboard: false
        });
    };
    $(function () {
        // 模态框的确定按钮的点击事件
        $("#approvalButton").click(function () {
            // ajax异步删除
            $.ajax({
                url: "/basic/ajax_user_approval/",
                type: "POST",
                data: {//请求参数
                    user_id: $("#user_approval_id").val(),
                    "csrfmiddlewaretoken":$("[name = 'csrfmiddlewaretoken']").val()
                },
                success: function (data) {
                    window.location.reload()     //执行完成后，刷新当前页面

                },
                //请求失败后操作
                error: function (jqXHR, textStatus, err) {
                    console.log(arguments);
                },
            })
        });
    });
</script>
<!--搜索控件操作-->
<script type="text/javascript">
    function searchButton(){
        console.log("----------------------");
        var status_search=document.getElementById("status_select_id");           //获取select标签对象
        var status_search_index=status_search.selectedIndex;                     //获取选择的索引
        var status_code = status_search.options[status_search_index].value;      //获取被选择的用户组ID值
        var name_search=document.getElementById("name_input_id");            //获取input标签对象
        var name = name_search.value;
        $.ajax({
            url: "/basic/ajax_user_info_search/",
            type: "POST",
            data: {//请求参数
                status_code: status_code,
                name_search: name,
                "csrfmiddlewaretoken":$("[name = 'csrfmiddlewaretoken']").val()
            },
            success: function (data) {

            },
            //请求失败后操作
            error: function (jqXHR, textStatus, err) {
                console.log(arguments);
            },
        })
    }
</script>
</body>
</html>
